<template>
	<div>
		<div class="cmt_item" v-for="(item,index) in comment" :key='index'>
			<div class="cmt_avatar">
				<div class="userphoto">
					<img :src="item.user.avatarUrl" alt="">
				</div>

			</div>
			<div class="cmt_wrap">
				<div class="cmt_header">
					<div class="cmt_meta">
						<div class="cmt_user">
							{{item.user.nickname}}
						</div>
						<div class="cmt_time">
							{{item.time|formatTimer}}
						</div>
					</div>
					<div class="cmt_like">
						<i class="iconfont icon-dianzan"></i>
					</div>
				</div>
				<div class="cmt_content">
					<span v-if="item.beReplied.length > 0">
						回复
						<a class="at" href="">@{{item.beReplied[0].user.nickname||""}}:</a>
					</span>
					{{item.content}}
				</div>
				<div class="cmt_replied" v-if="item.beReplied.length > 0">
					<span class="cmt_replied_user">
						@{{item.beReplied[0].user.nickname||""}}:
					</span>
					<span class="cmt_text">{{item.beReplied[0].content||"该评论已删除"}}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			comment: {
				type: Array,
				// default:[{
				// 	beReplied: [{
				// 		user:{
				// 			nickname:''
				// 		}
				// 	}]
				// }]
			}
		},
		created() {
			setTimeout(() => {
				console.log(this.comment)
			}, 1000)

		},
		data() {
			return {}
		}
	}
</script>

<style lang="scss" scoped>
	.cmt_item {
		padding-top: 10px;
		width: 100%;
		display: -webkit-flex;
		display: -webkit-box;
		display: flex;
		-webkit-flex-direction: row;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		flex-direction: row;
		border-bottom: 1px solid lightgrey;

		.cmt_avatar {
			margin: 0 10px;
			-webkit-flex: none;
			-webkit-box-flex: 0;
			flex: none;


			img {
				display: block;
				border-radius: 50%;
				width: 30px;
				height: 30px;
			}
		}

		.cmt_wrap {
			padding-right: 10px;
			padding-bottom: 11px;
			padding-left: 10px;
			-webkit-flex: auto;
			-webkit-box-flex: 1;
			flex: auto;
			width: 0;
			// background-color: pink;

			.cmt_header {
				display: -webkit-flex;
				display: -webkit-box;
				display: flex;
				-webkit-flex-direction: row;
				-webkit-box-orient: horizontal;
				-webkit-box-direction: normal;
				flex-direction: row;

				.cmt_meta {
					-webkit-flex: auto;
					-webkit-box-flex: 1;
					flex: auto;
					// width: 0;
					// font-size: 0;
					text-align: left;

					.cmt_user {
						font-size: 14px;
					}

					.cmt_time {
						font-size: 12px;
					}
				}

				.cmt_like {
					width: 65px;
					height: 22px;
					line-height: 22px;
					font-size: 11px;
					color: #999;
					-webkit-flex: none;
					-webkit-box-flex: 0;
					flex: none;
					text-align: right;
					margin-top: 8px;

					i {
						font-size: 20px;
					}
				}

			}

			.cmt_content {
				color: #333;
				font-size: 15px;
				line-height: 22px;
				margin-top: 5px;
				text-align: left;

				.at {
					color: #507daf;
					text-decoration: none;
				}
			}

			.cmt_replied {
				margin: 5px 0;
				padding: 10px;
				color: #888;
				font-size: 14px;
				line-height: 21px;
				border: 1px solid rgba($color: #000000, $alpha: .15);
				text-align: left;
			}
		}

	}
</style>
